<template>
	<view class="page">
		<view class="top-b">
			<view class="rigt position flex-container j-e" :style="containerStyle">
				<image class="topIcon" @tap="handleClick('gosetting')" :src="scrollPosition>0?srcf1:srcf2"
					mode="scaleToFill"></image>
				<view @click="gonoti()" class="topIcon" style="position: relative;">
					<view class="bubble" v-if="count!=0">
						{{count}}
					</view>
					<image style="width: 96%;height: 96%;" :src="scrollPosition>0?msg2:msg1"></image>
				</view>

			</view>
			<view class="clle flex-container flex-center ">
				<u-avatar :src="src"></u-avatar>
				<view class="mar">
					<view class="">
						{{username}}
					</view>
					<view class="h6" style="margin-top: 0.3rem;">
						{{phoneNumber}}
					</view>
				</view>
			</view>

			<view class="card">
			</view>
			<view class="box">
				<u-cell title="我的订单" isLink @tap="handleClick('goWait', null)"><text slot="value"
						class="txt-vl">全部</text></u-cell>
				<view class="flex-container j-s flex-center">
					<view class="dings" @click="handleClick('goWait', 0)">
						<image class="p-image" src="../../../static/my/pay1.png" mode="scaleToFill"></image>
						<text>预约中</text>
					</view>
					<view class="dings" @click="handleClick('goWait', 1)">
						<image class="p-image" src="../../../static/my/pay2.png" mode="scaleToFill"></image>
						<text>待付款</text>
					</view>
					<view class="dings" @click="handleClick('goWait', 2)">
						<image class="p-image" src="../../../static/my/pay3.png" mode="scaleToFill"></image>
						<text>待收货</text>
					</view>
					<view class="dings" @click="handleClick('goWait', 3)">
						<image class="p-image" src="../../../static/my/pay4.png" mode="scaleToFill"></image>
						<text>待评价</text>
					</view>
				</view>
			</view>
			<view class="box flex-container j-s flex-center" style="margin-top: 1rem;">
				<view class="dings">
					<view class="fen">{{rechargeCoins?rechargeCoins:0}}</view>
					<text>金币</text>
				</view>
				<view class="dings" @tap="handleClick('gocopon')">
					<view class="fen">{{coupoNum}}</view>
					<text>优惠券</text>
				</view>
				<view class="dings">
					<view class="fen">{{points?points:0}}</view>
					<text>积分</text>
				</view>

				<view class="dings">
					<view class="fen">0</view>
					<text>红包</text>
				</view>
			</view>
			<!-- <view class="notis">
				<image class="p-image" src="../../../static/my/m1.png" mode="scaleToFill"></image>
			</view> -->
			<view class="box flex-container j-start flex-center mores">
				<view class="ding1" @click="handleClick('goyu')">
					<view class="img">
						<image class="p-image" src="../../../static/my/u1.png" mode="scaleToFill"></image>
					</view>
					<text>预约</text>
				</view>
				<view class="ding1" @click="handleClick('goQrcode')">
					<view class="img">
						<image class="p-image" src="../../../static/tabBar/icon_ktye.png" mode="scaleToFill"></image>
					</view>
					<text>充值</text>
				</view>
				<view class="ding1" @click="handleClick('gocustom')">
					<view class="img">
						<image class="p-image" src="../../../static/my/u2.png" mode="scaleToFill"></image>
					</view>
					<text>客服</text>
				</view>
				<view class="ding1" @click="handleClick('goadderss')">
					<view class="img">
						<image class="p-image" src="../../../static/my/adder.png" mode="scaleToFill"></image>
					</view>
					<text>地址</text>
				</view>
				<view class="ding1">
					<view class="img">
						<image class="p-image" src="../../../static/my/u3.png" mode="scaleToFill"></image>
					</view>

					<text>意见反馈</text>
				</view>
				<view class="ding1" @click="handleClick('gocopon')">
					<view class="img">
						<image class="p-image" src="../../../static/my/wodeyuyue.png" mode="scaleToFill"></image>
					</view>

					<text>优惠卷</text>
				</view>
				<view class="ding1" @click="handleClick('gojiefen')">
					<view class="img">
						<image class="p-image" src="../../../static/my/jifen.png" mode="scaleToFill"></image>
					</view>

					<text>签到</text>
				</view>
				<view class="ding1" @click="handleClick('godrawal')">
					<view class="img">
						<image class="p-image" src="../../../static/my/uys.png" mode="scaleToFill"></image>
					</view>
				
					<text>提现</text>
				</view>
			</view>
		</view>
		<view style="height: 33rem;width: 100%;">

		</view>
		<tab-bar :current='2'></tab-bar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: "",
				scrollPosition: 0,
				rechargeCoins: 0,
				srcf1: "../../../static/my/setting2.png",
				msg1: "../../../static/my/msg.png",
				msg2: "../../../static/my/mes2.png",
				srcf2: "../../../static/my/setting.png",
				src: "",
				coupoNum: 0,
				count:0,
				phoneNumber:""
				
			}
		},
		onPageScroll(e) {
			let topRate = e.scrollTop / 100;
			// if (topRate > 1) {
			// 	topRate = 1;
			// }
			this.scrollPosition = topRate;
			console.log(this.scrollPosition);
		},
		computed: {
			userInfo() {
				return this.$store.getters.userInfo;
			},
			containerStyle() {
				// 根据滚动位置动态计算背景色的透明度
				return {
					backgroundColor: `rgba(255, 255,255, ${this.scrollPosition})`, // 使用 rgba 表示颜色，最后一位是透明度
				};
			}
		},
		onShow() {
			this.getgoer()
			this.$store.dispatch('getUserInfo');
		},
		onLoad() {
			
		},
		watch: {
			// 监听用户信息变化，更新组件中的数据
			userInfo: {
				handler(newValue) {
					this.username = newValue.username;
					this.rechargeCoins = newValue.rechargeCoins
					this.points = newValue.points
					this.phoneNumber=newValue.phoneNumber
					this.src=newValue.avatar
				},
				immediate: true // 立即触发一次
			}
		},
		mounted() {
			// 在组件挂载时触发获取用户信息的 action
			this.$store.dispatch('getUserInfo');
			this.getCoupon();
		},
		methods: {
			async getgoer() {
				const param = {
					userId: this.userInfo.uid
				}
				const res = await this.$request.get('/system/notification-user/getIsRead', param)
				console.log(res);
				if (res.code === 200) {
					this.count = res.data.count
				}
			},
			async getCoupon() {
				const param = {
					status: 0,
					userId: this.userInfo.uid
				}
				const res = await this.$request.get('/system/usercoupon/list', param)
				console.log(res);
				if (res.code === 200) {
					this.coupoNum = res.data.list.total
				}
			},
			checkToken() {
				// 从 Vuex 中获取用户信息
				const token = uni.getStorageSync('token')
                const {uid} = uni.getStorageSync('uid');
				// 检查用户信息中是否包含 token
				if (!token||!uid||!this.userInfo) {
					this.$store.state.userInfo = null
					uni.removeStorageSync('userInfo')
					// 如果 token 不存在或为空，则显示登录提示
					uni.showModal({
						title: '提示',
						content: '请登录后再进行操作',
						confirmText: '去登录',
						success: (res) => {
							if (res.confirm) {
								// 用户点击了确认按钮，跳转至登录页面
								this.goToLogin();
							}
						},
					});
					return false;
				}
				return true;

			},
			handleClick(action, index) {

				// 检查用户是否已登录
				if (!this.checkToken()) {
					// 如果用户未登录，则不执行后续操作
					return;
				}

				// 如果已登录，则根据不同的操作执行相应的操作
				switch (action) {
					case 'gosetting':
						this.gosetting();
						break;
					case 'goQrcode':
						this.goQrcode();
						break;
					case 'goWait':
						this.goWait(index);
						break;
					case 'goyu':
						this.goyu();
						break;
					case 'gocustom':
						this.gocustom();
						break;
					case 'goadderss':
						this.goadderss();
						break;
					case 'goreseve':
						this.goreseve();
						break;
					case 'gocopon':
						this.gocopon()
						break;
					case 'gojiefen':
						this.gojiefen()
						break;
					case 'godrawal':
					     this.godrawal()
						 break;
					default:
						break;
				}
			},
			// 用户点击某个控件事件处理
			goToLogin() {
				uni.navigateTo({
					url: '/pages/login/index', // 前往登录页的路径，请根据实际情况修改
				});
			},
			gosetting() {
				uni.navigateTo({
					url: "/pages/tabBar/my/setting/setting"
				})
			},
			gocopon() {
				uni.navigateTo({
					url: "/pages/tabBar/my/coupon/coupon"
				})
			},
			goQrcode() {
				uni.navigateTo({
					url: '/pages/tabBar/my/qrcodepy/qrcodepy'
				})
			},
			goreseve() {
				uni.navigateTo({
					url: '/pages/tabBar/yuyue/details/result/list'
				})
			},
			goWait(index) {
				if (index !== null) {
					uni.navigateTo({
						url: `/pages/tabBar/my/wait/index?index=${index}`
					})
				} else {
					uni.navigateTo({
						url: '/pages/tabBar/my/wait/index'
					})
				}

			},
			gonoti(){
				uni.navigateTo({
					url: '/pages/tabBar/my/notification/notification'
				})
			},
			godrawal(){
				uni.navigateTo({
					url:'/pages/tabBar/withdrawal/withdrawal'
				})
			},
			goyu() {
				uni.switchTab({
					url: '/pages/tabBar/yuyue/yuyue'
				})
			},
			gocustom() {
				uni.navigateTo({
					url: '/pages/test/test'
				})
			},
			goadderss() {
				uni.navigateTo({
					url: '/pages/tabBar/adderss/adderss'
				})
			},
			gojiefen() {
				uni.navigateTo({
					url: '/pages/tabBar/my/jifen/jifen'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.h6 {
		font-size: 1rem;
	}

	.top-b {

		background-image: url('~@/static/my/vipbg1.png'); // 使用Sass的url函数引入背景图片
		background-size: 100% 100%; // 可根据需要设置背景大小适应
		height: 15rem;
		width: 100%;

		.position {
			position: fixed;
			right: 0;


		}

		.txt-vl {
			font-size: 0.6rem;
			color: #474747;
		}

		.rigt {
			width: 100%;
			padding: 0.3rem 0;
			margin-bottom: 1rem;
			line-height: 2rem;

			.topIcon {
				margin-right: 1rem;

				width: 1.9rem;
				height: 1.9rem;
			}
		}

		.card {
			width: 80vw;
			height: 5rem;
			border-radius: 10px;
			background: linear-gradient(600deg, #fda409, #efc573);
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			padding: 20px;
			color: #fff;
			margin: 1rem auto;
			margin-bottom: 2rem;
			z-index: 1;

		}

		.clle {
			width: 90vw;
			margin: 0 auto;
			padding: 1rem 0;
			padding-top: 3rem;
			height: 1.5rem;

			.mar {
				margin-left: 0.4rem;
				color: #fff;
			}
		}

		// 其他样式
		.dings {
			padding: 1rem 0;
			text-align: center;

			image {
				width: 1.9rem;
				height: 2rem;
			}

			.fen {
				font-size: 1.1rem;
				margin-bottom: 0.5rem;
			}

			text {
				font-size: 0.8rem;
				color: #474747;
				text-align: center;
			}
		}

		.mores {
			margin: 1rem auto;
			flex-wrap: wrap;
			padding: 1.6rem 0;
		}

		.ding1 {

			text-align: center;

			width: 25%;

			/* 换行 */
			.img {
				width: 1.5rem;
				height: 1.5rem;
				margin: 0 auto;
				margin-bottom: 0.7rem;

			}

			text {
				font-size: 0.6rem;
				color: #7c7c7c;
				text-align: center;
			}

		}

		// * 从第二行开始，每隔四列设置间隔 */
		.ding1:nth-child(n + 5):nth-child(-n + 8),
		.ding1:nth-child(n + 9):nth-child(-n + 12),
		.ding1:nth-child(n + 13):nth-child(-n + 16),
		/* 添加更多行的样式规则，依次类推 */
			{
			margin-top: 1.6rem;
			/* 设置每一行的上边距 */
		}

		.notis {

			width: 90%;
			height: 2rem;
			margin: 1rem auto;
		}
	}

	.bubble {
		color: azure;
		text-align: center;
		line-height: 1.3rem;
		width: auto;
		/* 设置宽度为自动，根据内容自适应 */
		min-width: 1.1rem;
		/* 设置最小宽度为 1.1rem，适应单个数字 */
		height: auto;
		/* 设置高度为自动，根据内容自适应 */
		min-height: 1.1rem;
		/* 设置最小高度为 1.1rem，适应单个数字 */
		right: -0.3rem;
		z-index: 1000;
		padding: 0.1rem;
		position: absolute;
		background-color: red;
		border-radius: 50%;
	}
</style>